<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .question-card { margin-bottom: 20px; }
        .result-panel { padding: 20px; }
        .type-item { margin: 10px 0; }
        .score-bar { margin: 5px 0 15px 0; }
    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>中医体质辨识</h1>
    </div>
    <div class="app-container">
        <div class="box">
            <!-- 基本信息 -->
            <el-card class="box-card">
                <div slot="header">
                    <span>基本信息</span>
                </div>
                <el-form :model="formData" label-width="100px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="姓名">
                                <el-input v-model="formData.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="性别">
                                <el-radio-group v-model="formData.gender">
                                    <el-radio label="1">男</el-radio>
                                    <el-radio label="2">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="年龄">
                                <el-input-number v-model="formData.age" :min="1" :max="120"></el-input-number>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <!-- 体质测评表 -->
            <el-card class="box-card" style="margin-top: 20px;">
                <div slot="header">
                    <span>体质测评表（请根据近一年的体验选择）</span>
                </div>
                <div v-for="(category, index) in categories" :key="index" class="question-card">
                    <h3>{{ category.name }}</h3>
                    <el-form label-width="500px">
                        <el-form-item v-for="(question, qIndex) in category.questions"
                                      :key="qIndex"
                                      :label="question.text">
                            <el-radio-group v-model="question.answer">
                                <el-radio :label="1">没有</el-radio>
                                <el-radio :label="2">很少</el-radio>
                                <el-radio :label="3">有时</el-radio>
                                <el-radio :label="4">经常</el-radio>
                                <el-radio :label="5">总是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
                <el-button type="primary" @click="calculateResult">开始辨识</el-button>
            </el-card>

            <!-- 辨识结果 -->
            <el-dialog title="体质辨识结果" :visible.sync="dialogVisible" width="60%">
                <div class="result-panel">
                    <h3>{{ formData.name }}的体质辨识报告</h3>
                    <div v-for="(type, index) in constitutionTypes" :key="index" class="type-item">
                        <div>{{ type.name }}</div>
                        <el-progress
                                :percentage="type.score"
                                :color="type.score > 60 ? '#67C23A' : '#909399'"
                                class="score-bar">
                        </el-progress>
                    </div>
                    <div style="margin-top: 20px;">
                        <h4>主要体质类型：{{ mainType }}</h4>
                        <div>{{ typeDescription }}</div>
                        <h4 style="margin-top: 15px;">调养建议：</h4>
                        <div>{{ suggestion }}</div>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">关闭</el-button>
                        <el-button type="primary" @click="printResult">打印结果</el-button>
                    </span>
            </el-dialog>
        </div>
    </div>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            formData: {
                name: '',
                gender: '1',
                age: 30
            },
            categories: [
                {
                    name: '气虚质证候特征',
                    questions: [
                        { text: '容易疲乏', answer: 1 },
                        { text: '容易气短', answer: 1 },
                        { text: '容易心慌', answer: 1 },
                        { text: '说话声音低弱无力', answer: 1 }
                    ]
                },
                {
                    name: '阳虚质证候特征',
                    questions: [
                        { text: '手脚冰凉', answer: 1 },
                        { text: '喜欢温热', answer: 1 },
                        { text: '容易怕冷', answer: 1 },
                        { text: '面色偏白', answer: 1 }
                    ]
                },
                {
                    name: '阴虚质证候特征',
                    questions: [
                        { text: '手脚心发热', answer: 1 },
                        { text: '口燥咽干', answer: 1 },
                        { text: '眼睛干涩', answer: 1 },
                        { text: '容易失眠', answer: 1 }
                    ]
                }
            ],
            dialogVisible: false,
            constitutionTypes: [],
            mainType: '',
            typeDescription: '',
            suggestion: ''
        },
        methods: {
            calculateResult() {
                // 计算各体质得分
                let scores = {
                    '气虚质': 0,
                    '阳虚质': 0,
                    '阴虚质': 0
                };

                this.categories.forEach((category, index) => {
                    let sum = category.questions.reduce((acc, q) => acc + q.answer, 0);
                    let score = (sum / (category.questions.length * 5)) * 100;
                    scores[Object.keys(scores)[index]] = Math.round(score);
                });

                // 更新显示结果
                this.constitutionTypes = Object.entries(scores).map(([name, score]) => ({
                    name,
                    score
                }));

                // 确定主要体质类型
                let maxScore = Math.max(...Object.values(scores));
                this.mainType = Object.entries(scores).find(([_, score]) => score === maxScore)[0];

                // 设置描述和建议
                this.setDescriptionAndSuggestion();

                this.dialogVisible = true;
            },

            setDescriptionAndSuggestion() {
                const typeInfo = {
                    '气虚质': {
                        desc: '气虚体质的人容易疲劳，气短懒言，声音低弱，易感冒。',
                        sugg: '建议适当运动，注意休息，食用补气养血的食物，如大枣、黄芪等。避免过度劳累。'
                    },
                    '阳虚质': {
                        desc: '阳虚体质的人怕冷，手脚发凉，精神不振，喜温喜暖。',
                        sugg: '建议注意保暖，适当运动增加阳气，可食用温阳补气的食物，如生姜、羊肉等。'
                    },
                    '阴虚质': {
                        desc: '阴虚体质的人容易口干、失眠，手心脚心发热，容易烦躁。',
                        sugg: '建议清淡饮食，保持充足睡眠，避免熬夜，可食用滋阴润燥的食物，如百合、芝麻等。'
                    }
                };

                this.typeDescription = typeInfo[this.mainType].desc;
                this.suggestion = typeInfo[this.mainType].sugg;
            },

            printResult() {
                window.print();
            }
        }
    })
</script>
</html>